<template>
  <el-dialog v-model="_visible" width="800px">
    <template #header>
      <div>{{ props.title }}</div>
    </template>
    <xcmg-table
      :data="props.data"
      style="width: 100%"
      table-layout="fixed"
      max-height="400"
      border
    >
      <!-- 序号列 -->
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      />

      <!-- 代码列 -->
      <el-table-column
        prop="dict_value"
        label="代码"
      >
        <template #default="{ row }">
          <span>{{ row.dict_value }}</span>
        </template>
      </el-table-column>

      <!-- 信息描述列 -->
      <el-table-column
        prop="dict_desc"
        label="信息描述"
      >
        <template #default="{ row }">
          <span>{{ row.dict_desc }}</span>
        </template>
      </el-table-column>
    </xcmg-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  title: string;
  visible: boolean;
  data: Array<{ dict_value: string; dict_desc: string }>; // 明确类型
}>();
const emit = defineEmits(['update:visible']);

// 同步 visible 的双向绑定
const _visible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});

</script>

<style scoped>
</style>